<template>
	<view>
		<view class="c-box-nobg">
			<u-swiper :list="topSwiper" keyName="img" :show-title="true"></u-swiper>
		</view>
		<view class="c-box-nobg">
			<c-label title="标志性建筑"></c-label>
		</view>
		<view class="c-box-nobg">
			<u-grid :col="3" >
				<u-grid-item v-for="item in qu" @click="toRc(item.id)">
					<u-image :src="$http+item.imgUrl" height="150rpx" width="200rpx" radius="20rpx"></u-image>
					<text class="fs26 fw">{{item.name}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="c-box-nobg">
			<c-label title="驿站列表"></c-label>
		</view>
		<view class="c-box " v-for="item in stationList" :key="item.id" @click="toDetail(item.id)"> 
			<view class="fl">
				<view class="">
					<u-image :src="item.coverImgUrl" height="160rpx" width="220rpx" radius="20rpx"></u-image>
				</view>
				<view class="ml32">
					<h5>{{item.name}}</h5>
					<view class="fs26">
						剩余床位:男{{item.bedsCountBoy}}个,女{{item.bedsCountGirl}}个
					</view>
					<view class="fl mt8 fs24">
						<u-icon name="map" ></u-icon>
						<text class="u-line-2 ">{{item.address}}</text>
					</view>
				</view>
			</view>
			<view class=" " style="width: 100%;">
				<u-collapse :border="false">
					<u-collapse-item title="站点介绍" :border="false">
						<text>{{item.introduce}}</text>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,getCurrentInstance } from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import { getQYAPI, getStationAPI } from '../../api/youthStation';
const {proxy } =getCurrentInstance()
	const stationList = ref()
	const topSwiper =ref([])
	const getStation=async ()=>{
		const res = await getStationAPI()
		stationList.value=res.rows.map(item=>{
			 item.coverImgUrl =proxy.$http+item.coverImgUrl
			 return item
		})
		stationList.value.slice(0,1).map(item=>{
			topSwiper.value.push({
				title:item.introduce.slice(0,22),
				img:item.coverImgUrl
			})
		})
	}
	const qu=ref()
	const getQy=async()=>{
		const res =await getQYAPI()
		qu.value=res.data
	}
	const toRc = (id)=>{
		uni.navigateTo({
			url:"/subpages/youthStation/rc/rc?id="+id
		})
	}
	const toDetail = (id)=>{
		uni.navigateTo({
			url:'/subpages/youthStation/detail/detail?id='+id
		})
	}
	onLoad(()=>{
		getStation()
		getQy()
	})
</script>

<style>

</style>
